"use client"
import Content from '@/app/admin/page'
import React, { useEffect, useState } from 'react';
import { Button, Space, Table, Tag, Popconfirm, message } from 'antd';
import Model from '@/app/admin/users/components/Modal'

import { getUsers, updUser,delUser } from '@/api/usersApi'
import { payments } from '@/utils/data.json'
export default function Home() {
  const [data, setData] = useState(payments);

  const Init = async () => {
    const res = await getUsers()
    if (res?.flag) {
      setData(res.data)
    } else {
      message.error('服务器未响应');
    }
  }
  useEffect(() => {
    // Init()
  }, [])
  // 删除确认框
  const DelUser = async (_id: string) => {
    // await delUser({ _id })
    // await Init()
    message.success('操作成功');
  };
  // 弹窗
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modelPrpos, setModelPrpos] = useState({});


  const columns: any = [
    // {
    //   title: '支付 ID（主键）',
    //   dataIndex: 'paymentId',
    //   key: 'paymentId',
    // },
    {
      title: '合同 ID',
      dataIndex: 'contractId',
      key: 'contractId',
    },
    {
      title: '支付日期',
      dataIndex: 'paymentDate',
      key: 'paymentDate',
    },
    {
      title: '支付金额',
      dataIndex: 'amount',
      key: 'amount',
    },
    {
      title: '支付状态',
      key: 'status',
      dataIndex: 'status',
      render: (_: any, record: any) => (
        _ === '失败' ? (
          <Tag color='volcano' key={_}>
            {_}
          </Tag>
        ) :
          _ === '成功' ? (
            <Tag color='green' key={_}>
              {_}
            </Tag>
          ) : (
            <Tag color='geekblue' key={_}>
              {_}
            </Tag>
          )
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: any) => (
        <Space size="middle">
            <Popconfirm
              title="是否删除这条数据?"
              onConfirm={() => DelUser(record._id)}
              okText="是"
              cancelText="否"
            >
              <Button color="danger" variant="solid" size='small'>删除</Button>
            </Popconfirm>
        </Space>
      ),
    },
  ];

  return (<Content>
    <div
      style={{
        padding: 24,
        minHeight: 360,
        background: '#fff',
        borderRadius: 10,
        flex: 1,
        overflow: 'auto'
      }}
    >
      <Table columns={columns} dataSource={data} rowKey={record => record.paymentId} />
      <Model isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} modelPrpos={modelPrpos} Init={Init} />
    </div>
  </Content>
  );
};
